<template>
  <div class="food-card">
    <div class="food-image" @click="$emit('click', food)">
      <img :src="food.image" :alt="food.name" />
    </div>
    <div class="food-info">
      <h4 class="food-name">{{ food.name }}</h4>
      <p class="food-desc">{{ food.description }}</p>
      <div class="food-stats">
        <span class="food-rating">
          <star-rating :score="food.rating" :show-score="true" :precision="1" />
        </span>
        <span class="food-sales">月售{{ food.monthlySales }}+</span>
      </div>
      <div class="food-price-actions">
        <div class="price">
          <span class="current-price">¥{{ food.price }}</span>
          <span v-if="food.originalPrice" class="original-price">
            ¥{{ food.originalPrice }}
          </span>
        </div>
        <el-button
          type="primary"
          circle
          :icon="buttonIcon"
          :size="buttonSize"
          @click.stop="$emit('add')"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, withDefaults } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import StarRating from '@/components/common/StarRating.vue';
import { Food } from '@/types/customer';

const props = withDefaults(defineProps<{
  food: Food;
  buttonIcon?: any;
  buttonSize?: string;
}>(), {
  buttonIcon: Plus,
  buttonSize: 'small'
});

defineEmits<{
  (e: 'click', food: Food): void;
  (e: 'add'): void;
}>();
</script>

<style scoped>
.food-card {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.food-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
}

.food-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-info {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.food-name {
  font-size: 16px;
  margin: 0 0 5px;
  font-weight: bold;
}

.food-desc {
  font-size: 12px;
  color: #999;
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.food-stats {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.food-price-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.current-price {
  font-size: 16px;
  color: #ff6600;
  font-weight: bold;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}
</style>
